<template>
  <view class="content">
    <view class="banner" :style="{ 'background-image': 'url('+imgPath+ '/images/index_banner.png' +')' }">
      <!-- <image :src="`${imgPath}/images/index_banner.png`" width="100%" mode="widthFix"/> -->
      <view class="set-lang">
        <picker :value="langIndex" :range="langArr" range-key="name" @change="langChange">
          <view class="lang-picker">{{langArr[langIndex].name}}<u-icon name="arrow-down-fill" color="#ccc" size="14" /></view>
        </picker>
      </view>
      <view class="yellow-word">{{ $t("login.houAiJk") }}</view>
      <view class="h-title">{{ $t("login.heHuoRyYpT") }}</view>
      <view class="s-title">{{ $t("login.heHuoRjH") }}</view>
    </view>
    <view class="login-tab">
      <u-row>
        <u-col span="6" @click="changeTab('register')">
          <view class="login" :class="{active:tabActive == 'register'}">{{ $t("login.zhuCe") }}</view>
        </u-col>
        <u-col span="6" @click="changeTab('login')">
          <view class="login" :class="{active:tabActive == 'login'}">{{ $t("login.dengLu") }}</view>
        </u-col>
      </u-row>
    </view>
    <register v-if="tabActive =='register'" ref="register" />
    <login v-if="tabActive =='login'" ref="login" />
    <view class="agreement">
      <view class="agreement-radio">
        <u-checkbox-group v-model="isAgree">
          <u-checkbox shape="circle" name="1" activeColor="#75CECC" />
        </u-checkbox-group>
      </view>
      <view class="agreement-text">
        {{ $t("login.renZhenYd") }}<text @click="goToUserInfo">《{{ $t("login.yongHuXy") }}》</text>与 <text @click="goToUserPrivacy">《{{ $t("login.yinSiZc") }}》</text>
      </view>
    </view>
    <view class="next">
      <u-button type="success" loadingText="加载中" :disabled="isAgree.length === 0" color="#75CECC" @click="nextStep" v-if="tabActive =='register'">{{ $t("login.xiaYiB") }}</u-button>
      <u-button type="success" loadingText="加载中" :disabled="isAgree.length === 0" color="#75CECC" @click="loginFun" v-else>{{ $t("login.dengLu") }}</u-button>
    </view>
    <view class="sms-login" v-if="tabActive =='login'" @click="changeLogin">{{ loginTxet }}</view>
  </view>
</template>

<script>
import register from "./components/register.vue";
import login from "./components/login.vue";
export default {
  components: {
    register,
    login,
  },
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      title: "Hello",
      isAgree: [],
      tabActive: "register",
      loginTxet: this.$t("login.duanXinDl"),
      langIndex: 0,
      nextLoading: false,
      langArr: [
        {
          name: "简体中文",
          value: "zh-Hans",
        },
        {
          name: "繁体中文",
          value: "zh-Hant",
        },
      ],
    };
  },
  onLoad(options) {
    if (options?.register) {
      this.tabActive = "login";
    }
    // console.log(this.imgPath)
  },
  onReady() {
    if (uni.getLocale() === "zh-Hans") {
      this.langIndex = 0;
    } else if (uni.getLocale() === "zh-Hant") {
      this.langIndex = 1;
    }
    uni.setNavigationBarTitle({
      title: this.$t("login.zhuCe"),
    });
  },
  methods: {
    changeTab(str) {
      this.tabActive = str;
    },
    langChange(e) {
      this.langIndex = e.detail.value;
      if (e.detail.value === "0") {
        this.$i18n.locale = "zh-Hans";
        uni.setLocale("zh-Hans");
      } else {
        this.$i18n.locale = "zh-Hant";
        uni.setLocale("zh-Hant");
      }
      this.loginTxet = this.$t("login.duanXinDl");
    },
    // 用户协议
    goToUserInfo() {
      uni.navigateTo({
        url: "/pages/register/regist_user_info",
      });
    },
    // 隐私政策
    goToUserPrivacy() {
      uni.navigateTo({
        url: "/pages/register/regist_user_privacy",
      });
    },
    async loginFun() {
      const phone = this.$refs.login?.user?.phone || "";
      // 密码登录
      if (this.$refs.login.isPassword) {
        const password = this.$refs.login?.user?.password || "";
        if (phone.length === 0 || password.length === 0) {
          return uni.$u.toast(this.$t("login.tianXieSjHMm"));
        }
      } else {
        // 验证码登录
        const code = this.$refs.login?.user?.code || "";
        if (phone.length === 0 || code.length === 0) {
          return uni.$u.toast(this.$t("login.tianXieSjH"));
        }
      }
      if (!uni.$u.test.mobile(phone)) {
        return uni.$u.toast(this.$t("login.tianXieZqSjH"));
      }
      let res = {};
      // 密码登录和验证码登录分别调不同的接口
      if (this.$refs.login.isPassword) {
        const password = this.$refs.login?.user?.password || "";
        res = await this.$api.loginByPwd({ phone: phone, password: password });
      } else {
        const code = this.$refs.login?.user?.code || "";
        res = await this.$api.userLogin({ phone: phone, smsCode: code });
      }
      if (res.code === 0) {
        uni.removeStorageSync("token");
        uni.setStorageSync("token", res.data);
        uni.reLaunch({
          url: "/pages/index/index",
        });
      }
    },
    changeLogin() {
      this.$refs.login.isPassword = !this.$refs.login.isPassword;
      if (this.$refs.login.isPassword) {
        this.loginTxet = this.$t("login.duanXinDl");
        this.$refs.login.user.password = "";
      } else {
        this.loginTxet = this.$t("login.miMaDl");
        this.$refs.login.user.code = "";
      }
    },
    /**
     * 防止多次点击
     */
    nextStep() {
      uni.$u.debounce(this.nextStepFun, 1000);
    },

    nextStepFun() {
      const phone = this.$refs.register?.user?.phone || "";
      const code = this.$refs.register?.user?.code || "";
      if (phone.length === 0 || code.length === 0) {
        return uni.$u.toast(this.$t("login.tianXieSjH"));
      }
      if (!uni.$u.test.mobile(phone)) {
        return uni.$u.toast(this.$t("login.tianXieZqSjH"));
      }
      this.nextLoading = true;
      this.$api
        .checkSmsCode({ phone: phone, code: code })
        .then((res) => {
          this.nextLoading = false;
          if (res.code === 0) {
            uni.navigateTo({
              url: "/pages/register/register_second?phone=" + phone,
            });
          } else {
            uni.$u.toast(res.msg);
          }
        })
        .catch(() => {
          this.nextLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  overflow: hidden;
  padding-bottom: 20px;
}
.banner {
  overflow: hidden;
  width: 100%;
  height: 260px;
  background-size: 100% 100%;
  .set-lang {
    height: 40px;
    padding: 40px 0 0 30px;
    .lang-picker {
      display: flex;
    }
  }
  .yellow-word {
    border-radius: 13px 13px 13px 0px;
    background-color: #ffb33b;
    margin: 10px 0 0 30px;
    width: 100px;
    height: 30px;
    color: #fff;
    line-height: 30px;
    text-align: center;
  }
  .h-title {
    padding: 10px 0 0 30px;
    font-weight: bold;
    font-size: 22px;
    color: #333;
    line-height: 30px;
  }
  .s-title {
    padding: 10px 0 0 30px;
    color: #666;
  }
}
.login-tab {
  height: 40px;
  widows: 100%;
  overflow: hidden;
  .tab-item {
    width: 100%;
    overflow: hidden;
  }
}
.login {
  height: 36px;
  color: #666;
  width: 40px;
  line-height: 36px;
  margin: 0 auto;
  text-align: center;
}
.login.active {
  border-bottom: 4px solid #75cecc;
}
.login-content {
  overflow: hidden;
  margin-top: 30px;
  padding: 0 30px;
  .login-phone {
    margin-top: 20px;
    background-color: #f6f9fe;
    height: 48px;
    border-radius: 8px;
    /deep/.u-input__content {
      height: 48px;
      padding: 0 10px;
    }
    /deep/.u-input__content__prefix-icon {
      margin-right: 15px;
    }
  }
}
.agreement {
  margin-top: 20px;
  display: flex;
  height: 60px;
  padding: 0 30px;
  .agreement-radio {
    width: 40px;
  }
  .agreement-text {
    font-size: 14px;
    color: #333;
    text {
      color: #75cecc;
    }
  }
}
.next {
  padding: 0 30px;
  overflow: hidden;
  height: 60px;
  margin-top: 40px;
}
.sms-login {
  text-align: center;
  color: #75cecc;
  font-size: 16px;
  text-decoration: underline;
}
</style>
